<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
		<title>新建亲友信息</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style type="text/css">
			body {
				background-color: #F5F5F5;
			}
			body {
				background-color: #F5F5F5;
			}

			::placeholder {
				font-size: .75rem;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: rgba(187, 187, 187, 1);
			}
			/*改写*/

			.edit_info {
				padding: 0 0.75rem;
			}

			input {
				text-align: right
			}

			.edit_info {
				background: rgba(255, 255, 255, 1);
			}

			.edit_info>div {
				height: 2.75rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 0.75rem;
				font-family: PingFangSC-font-size: 0.75rem;
				font-family: PingFangSC;
				font-weight: 400;
				color: rgba(34, 34, 34, 1);
				border-bottom: 1px solid rgba(238, 238, 238, 0.5);
				font-weight: 400;
				color: rgba(34, 34, 34, 1);
			}

			.edit_info>div img {
				width: 1rem;
				height: 1rem;
				padding: 0;
				transform: translateX(0.22rem);
			}

			.btn_save {
				width: 17.25rem;
				height: 2rem;
				background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
				border-radius: 1.23rem;
				margin: 2rem auto;
				font-size: 0.8rem;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				line-height: 2rem;
				text-align: center;
			}
			.choose_cont{
				color:rgba(187,187,187,1)!important;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="edit_info">
				<div>
					<span>姓名</span>
					<div>
						<input v-model="realname" type="text" placeholder="请输入姓名" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);" />
					</div>
				</div>
				<div tapmode @click="sel_date">
					<span>生日</span>
					<div style="display:flex;align-items:center;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">
						<span style="display:inline-block:margin-right:0.25rem;transform: translateX(0.22rem);" :class="{'choose_cont':birthday == '请选择'}">{{birthday}}</span>
						<img src="../../image/btn/btn-right.png"  />
					</div>
				</div>
			</div>
			<div class="btn_save" tapmode onclick="next()">
				保存
			</div>

			<!-- <div style="padding: .75rem .75rem;">
				<div style="color: #666666;height:1.8rem;line-height: 0.9rem;font-size:.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">
					亲爱的朋友们，我们将在生日前1周、2天、当天发送短信提醒您哦~1
				</div>
			</div> -->

			<!-- 已存在的生日提醒 按钮：编辑/删除-->
			<!-- <div class="aui-swipe-handle" style="background-color: #F5F5F5;">
				<div class="ming-bg-white birthday-list" style="margin-bottom:.5rem;padding:0 .75rem;">
					<div class="aui-text-left" style="border-bottom:1px solid #EEEEEE;width:100%;display:inline-block;height:2.75rem;line-height:2.75rem;background-color:#fff;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">
						名字 -->
						<!-- ({{vo.callname}}) -->
					<!-- </div><br>
					<div class="aui-text-left" style="border-bottom:1px solid #EEEEEE;width:100%;display:inline-block;height:2.75rem;line-height:2.75rem;background-color:#fff;">
						<span style="font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);">
							生日日期
						</span>
					</div> -->
					<!-- 编辑和删除  ! 编辑还未绑定事件!!!-->
					<!-- <div class="aui-text-left" style="width:100%;display:inline-block;height:2.2rem;background-color:#fff;position:relative;">
						<span style="right:2.25rem;position:absolute;top:50%;transform:translateY(-%);" >
							<img src="../../image/btn/btn-edit.png" / style="width: 1rem;display:inline-block;">
						</span>
						<span style="right:0;position:absolute;top:50%;transform:translateY(-%);">
							<img src="../../image/btn/btn-del.png" / style="width: 1rem;display:inline-block;">
						</span>
					</div>
				</div> -->
				<!-- <div class="aui-swipe-right-btn" tapmode @touchstart.stop @click="del(vo.id)"  style="border-bottom:1px solid #dddddd;width:100%;display:inline-block;">
					<span style="z-index: 99;">删除</span>
				</div> -->
			<!-- </div> -->

			<!-- 准备新增加生日提醒 -->
			<!-- <div class="ming-bg-white" style="padding:0 .75rem;">
				<ul class="aui-list aui-list-noborder">
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title">
								姓名
							</div>
							<div class="aui-list-item-title" style="font-size: 0.75rem;padding-right:.5rem;">
								<input v-model="realname" type="text" placeholder="请输入姓名" maxlength="15" style="color:#666666;"/>
							</div>
						</div>
					</li> -->
					<!-- <li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title">
								称呼
							</div>
							<div class="aui-list-item-title" style="font-size: 0.75rem;padding-right:.5rem;">
								<input v-model="callname" type="text" placeholder="请输入称呼" />
							</div>
						</div>
					</li> -->
					<!-- <li class="aui-list-item" tapmode @click="sel_date">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title">
								生日
							</div>
							<div class="aui-list-item-title">
								<span v-if="birthday!==''" style="font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);display:ininline-block;margin-right:-.3rem;">
									{{birthday}}
								</span>
								<span v-else style="font-size:15px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(187,187,187,1);display:inline-block;margin-right:-.3rem;">请选择</span>
								<img src="../../image/btn/btn-right.png" style="margin-right:.3rem;"/>
							</div>
						</div>
					</li>
					<li   class="aui-list-item"  tapmode onclick="next()">
						<div class="aui-btn-block" :class="{'active':realname!=='' && birthday!==''}" >
						保存
						</div>
					</li>
				</ul>
			</div> -->

			<!-- 提交生日提醒的按钮 -->
			<!-- <div class="btn"  >
				<div class="aui-btn-block" tapmode onclick="next()" :class="{'active':realname!=='' && birthday!==''}">
					增加生日提醒
				</div>
			</div> -->
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				id: 0,
				realname: '',
				callname: '',
				birthday: '请选择',
			},
			methods: {
				sel_date: function() {
					api.openPicker({
						type: 'date',
						title: '选择日期'
					}, function(ret, err) {
						if(ret) {
							var str = ret.year + '.'+ ret.month + '.'+ ret.day;
							vm.birthday = str;
						} else {
							console.log(JSON.stringify(err));
						}
					});
				}
			}
		})
		apiready = function() {
			// vm.get_userinfo()
			if ($api.getStorage('birthday_info')) {
				vm.id = $api.getStorage('birthday_info').id
				vm.realname = $api.getStorage('birthday_info').realname
				vm.callname = $api.getStorage('birthday_info').callname
				vm.birthday = $api.getStorage('birthday_info').birthday
				$api.rmStorage('birthday_info')
			}
		}

		function next() {
			if(vm.id == 0) {
				get_data('/api/User/addUserFamily',{
					token:$api.getStorage('token'),
					realname:vm.realname,
					callname:'',
					birthday:vm.birthday
				},function(ret){
					toast(ret.msg)
					if (ret.status) {
						send_event('birthday_ref')
						delay_close(300)
					}
				})
			} else {
				get_data('/api/User/editUserFamily',{
					id:vm.id,
					token:$api.getStorage('token'),
					realname:vm.realname,
					// callname:vm.callname,
					birthday:vm.birthday
				},function(ret){
					toast(ret.msg)
					if (ret.status) {
						send_event('birthday_ref')
						delay_close(300)
					}
				})
			}
		}
	</script>

</html>
